import React from "react"
import "tui-chart/dist/tui-chart.css"
import { MapChart } from "@toast-ui/react-chart"
import TuiChart from "tui-chart"
import "./toastui.scss"

var theme = {
  chart: {
    background: {
      color: "#fff",
      opacity: 0,
    },
  },
  title: {
    color: "#8791af",
  },

  legend: {
    label: {
      color: "#8791af",
    },
  },
  series: {
    startColor: "#556ee6",
    endColor: "#34c38f",
    overColor: "#75b5aa",
    borderColor: "#F4511E",
  },
}
TuiChart.registerTheme("trailoxTheme", theme)

const MapChartToast = () => {
  const data = {
    series: [
      {
        code: "US-AK",
        data: -3.0,
      },
      {
        code: "US-AL",
        data: 17.1,
      },
      {
        code: "US-AZ",
        data: 15.7,
      },
      {
        code: "US-CA",
        data: 15.2,
      },
      {
        code: "US-CO",
        data: 7.3,
      },
      {
        code: "US-CT",
        data: 9.4,
      },
      {
        code: "US-DC",
        data: 12.3,
      },
      {
        code: "US-DE",
        data: 12.9,
      },
      {
        code: "US-FL",
        data: 21.5,
      },
      {
        code: "US-GA",
        data: 17.5,
      },
      {
        code: "US-HI",
        data: 21.1,
      },
      {
        code: "US-IA",
        data: 8.8,
      },
      {
        code: "US-ID",
        data: 6.9,
      },
      {
        code: "US-IL",
        data: 11.0,
      },
      {
        code: "US-IN",
        data: 10.9,
      },
      {
        code: "US-KS",
        data: 12.4,
      },
      {
        code: "US-KY",
        data: 13.1,
      },
      {
        code: "US-LA",
        data: 19.1,
      },
      {
        code: "US-MA",
        data: 8.8,
      },
      {
        code: "US-MD",
        data: 12.3,
      },
      {
        code: "US-ME",
        data: 5.0,
      },
      {
        code: "US-MI",
        data: 6.9,
      },
      {
        code: "US-MN",
        data: 5.1,
      },
      {
        code: "US-MO",
        data: 12.5,
      },
      {
        code: "US-MS",
        data: 17.4,
      },
      {
        code: "US-NC",
        data: 15.0,
      },
      {
        code: "US-ND",
        data: 4.7,
      },
      {
        code: "US-NE",
        data: 9.3,
      },
      {
        code: "US-NH",
        data: 6.6,
      },
      {
        code: "US-NJ",
        data: 11.5,
      },
      {
        code: "US-NM",
        data: 11.9,
      },
      {
        code: "US-NV",
        data: 9.9,
      },
      {
        code: "US-NY",
        data: 7.4,
      },
      {
        code: "US-OH",
        data: 10.4,
      },
      {
        code: "US-OK",
        data: 15.3,
      },
      {
        code: "US-OR",
        data: 9.1,
      },
      {
        code: "US-PA",
        data: 9.3,
      },
      {
        code: "US-RI",
        data: 10.1,
      },
      {
        code: "US-SC",
        data: 16.9,
      },
      {
        code: "US-SD",
        data: 7.3,
      },
      {
        code: "US-TN",
        data: 14.2,
      },
      {
        code: "US-TX",
        data: 18.2,
      },
      {
        code: "US-UT",
        data: 9.2,
      },
      {
        code: "US-VA",
        data: 12.8,
      },
      {
        code: "US-VT",
        data: 6.1,
      },
      {
        code: "US-WA",
        data: 9.1,
      },
      {
        code: "US-WI",
        data: 11.0,
      },
      {
        code: "US-WV",
        data: 6.2,
      },
      {
        code: "US-WY",
        data: 5.6,
      },
    ],
  }

  const options = {
    chart: {
      height: 380,
      title: "Average annual temperature of USA (°C)",
    },
    map: "usa",
    legend: {
      align: "right",
    },
    tooltip: {
      suffix: "°C",
    },
  }
  return (
    <React.Fragment>
      <MapChart data={data} options={options} theme={theme} />
    </React.Fragment>
  )
}
export default MapChartToast
